<#import "/layout.html" as c>
    <@c.html title="Index">

    <!-- 开始页面内容 -->
    <div id="content" class="content">
        <!-- 开始面包屑导航 -->
        <ol class="breadcrumb pull-right">
            <li><a href="javascript:;">首页</a></li>
            <#list menuState.breadCrumbList as breadCrumb>
                <li class="">${breadCrumb}</li>
            </#list>
        </ol>
        <!-- 结束面包屑导航 -->
        <!-- 开始页头区域 -->
        <h1 class="page-header">栏目管理
            <small class="m-l-10">管理网站栏目相关内容设置</small>
        </h1>
        <!-- 结束页头区域 -->
        <!-- 开始布局行 -->
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-inverse">
                    <div class="panel-heading">
                        <div class="panel-heading-btn"><a href="#listTip"
                                                          class="btn btn-xs btn-icon btn-circle btn-info" role="button"
                                                          data-toggle="collapse" aria-expanded="true" title="操作提示"><i
                                class="fa fa-lightbulb-o"></i></a><a href="javascript:;"
                                                                     class="btn btn-xs btn-icon btn-circle btn-default"
                                                                     data-click="panel-expand"> <i
                                class="fa fa-expand"></i></a><a href="javascript:;"
                                                                class="btn btn-xs btn-icon btn-circle btn-warning"
                                                                data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                        </div>
                        <h4 class="panel-title">栏目列表</h4>
                    </div>
                    <div class="panel-body">
                        <!-- 开始列表相关操作 -->
                        <div class="clearfix">
                            <div class="col-md-3 p-l-0">
                                <a id="returnParent" href="javascript:;"
                                   class="btn btn-white pull-left m-r-5 m-b-5 hidden"> <i
                                        class="fa fa-lg fa-level-up m-r-5"></i>返回上级</a>
                                <a href="#addModal" class="btn btn-success pull-left m-r-5 m-b-5" data-toggle="modal">
                                    <i class="fa fa-lg fa-plus m-r-5"></i>新增数据</a>
                            </div>
                            <div class="col-md-9 p-r-0">
                                <form class="search-dtGrid-form" action="">
                                    <!--<div class="form-group">-->
                                        <!--<input type="text" id="keyword" name="keyword" class="form-control"-->
                                               <!--placeholder="请输入栏目名称作为关键字进行搜索"/>-->
                                        <!--<a href="javascript:;" class="btn btn-search" id="customSearch"> <i-->
                                                <!--class="fa fa-search"></i></a></div>-->
                                </form>
                            </div>
                        </div>
                        <!-- 结束列表相关操作 -->

                        <div id="dtGridContainer" class="dt-grid-container"></div>

                        <div id="dtGridToolBarContainer" class="dt-grid-toolbar-container"></div>

                        <!-- 开始新增栏目模态窗口 -->
                        <div class="modal fade" id="addModal" tabindex="-1" role="dialog">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                                        </button>
                                        <h4 class="modal-title">新增栏目</h4>
                                    </div>
                                    <div class="modal-body">
                                        <!-- 开始新增菜单设置模块 -->
                                        <form id="addForm" action="${adminRoot}site/json/add" method="post"
                                              autocomplete="off" data-parsley-validate="true">
                                            <div class="form-group">
                                                <label class="control-label">栏目名称<i class="f-s-14 text-danger">*</i>&nbsp;:</label>
                                                <input type="text" class="form-control" name="name" autocomplete="off"
                                                       placeholder="请输入栏目名称" data-tip="tooltip" data-placement="auto"
                                                       data-original-title="必填选项，可使用中英文、内容长度控制在2-30个字符。"
                                                       data-parsley-required="true"
                                                       data-parsley-length="[2, 30]"/>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">栏目标识<i class="f-s-14 text-danger">*</i>&nbsp;:</label>
                                                <input type="text" class="form-control" name="nid" autocomplete="off"
                                                       placeholder="请输入栏目标识" data-tip="tooltip" data-placement="auto"
                                                       data-original-title="必填选项，可使用中英文、内容长度控制在2-10个字符。"
                                                       data-parsley-required="true"
                                                       data-parsley-length="[2, 10]"/>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-2 col-sm-3">栏目图片<i class="f-s-14 text-danger">*</i>&nbsp;:</label>
                                              <!--  <div class="col-md-9 col-sm-8">-->
                                                    <input type="hidden" id="addFormPicPath" name="sitpic" data-parsley-required="true">
                                                    <div class="clickreply-image m-b-15"><img src="${imgRoot}default_image.gif" id="addFormPicImg" alt="" class="media-object viewImage"></div>
                                                    <p class="text-info">封面图片尺寸要求宽度为360像素、高度为200像素；支持格式gif，jpg，png。</p>
                                                    <span class="btn btn-sm btn-white fileinput-button"> <i class="fa fa-upload"></i> <span>文件上传</span>
                                                    <input id="addFormPic" type="file" name="file" autocomplete="off" multiple>
                                                     </span>
                                                <!--</div>-->
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">排序<i class="f-s-14 text-danger">*</i>&nbsp;:</label>
                                                <input type="number" class="form-control" name="sortNo"
                                                       autocomplete="off" placeholder="请输入排序号" value="0"
                                                       data-tip="tooltip" data-placement="auto"
                                                       data-original-title="必填选项，可使100以内正整数数。"
                                                       data-parsley-length="[1, 3]"/>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">所在层级&nbsp;:</label>
                                                <input disabled type="text" class="form-control" value="1"/>
                                                <input name="level" type="hidden" value="1"/>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">父级栏目&nbsp;:</label>
                                                <input disabled type="text" class="form-control" value="--"/>
                                                <input name="pid" type="hidden" value="0"/>
                                            </div>
                                        </form>
                                        <!-- 结束新增栏目设置模块-->
                                    </div>
                                    <div class="modal-footer">
                                        <a href="javascript:;" class="btn btn-white" data-dismiss="modal">取消编辑</a>
                                        <a href="javascript:;" class="btn btn-primary" data-loading-text="Loading..."
                                           nc-ajax-submit-target="addForm" nc-ajax-submit>确认提交</a></div>
                                </div>
                            </div>
                        </div>
                        <!-- 结束新增栏目模态窗口 -->

                        <!-- 开始编辑菜单模态窗口 -->
                        <div class="modal fade" id="editModal" tabindex="-1" role="dialog">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                                        </button>
                                        <h4 class="modal-title">编辑栏目</h4>
                                    </div>
                                    <div class="modal-body">
                                        <!-- 开始编辑栏目设置模块 -->
                                        <form id="editForm" action="${adminRoot}site/json/edit" method="post"
                                              autocomplete="off" data-parsley-validate="true">
                                            <input type="hidden" name="id" value="">
                                            <div class="form-group">
                                                <label class="control-label">栏目名称<i class="f-s-14 text-danger">*</i>&nbsp;:</label>
                                                <input type="text" class="form-control" name="name" autocomplete="off"
                                                       placeholder="请输入栏目名称" data-tip="tooltip" data-placement="auto"
                                                       data-original-title="必填选项，可使用中英文、内容长度控制在2-30个字符。"
                                                       data-parsley-required="true"
                                                       data-parsley-length="[2, 30]"/>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">栏目标识<i class="f-s-14 text-danger">*</i>&nbsp;:</label>
                                                <input type="text" class="form-control" name="nid" autocomplete="off"
                                                       placeholder="请输入栏目标识" data-tip="tooltip" data-placement="auto"
                                                       data-original-title="必填选项，可使用中英文、内容长度控制在2-10个字符。"
                                                       data-parsley-required="true"
                                                       data-parsley-length="[2, 10]"/>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-2 col-sm-3">栏目图片<i class="f-s-14 text-danger">*</i>&nbsp;:</label>
                                                    <input type="hidden" id="editFormPicPath" name="sitpic" data-parsley-required="true">
                                                    <div class="clickreply-image m-b-15"><img src="${imgRoot}default_image.gif" id="editFormPicImg" alt="" class="media-object viewImage"></div>
                                                    <p class="text-info">封面图片尺寸要求宽度为360像素、高度为200像素；支持格式gif，jpg，png。</p>
                                                    <span class="btn btn-sm btn-white fileinput-button"> <i class="fa fa-upload"></i> <span>文件上传</span>
                                                    <input id="editFormPic" type="file" name="file" autocomplete="off" multiple></span>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">排序<i class="f-s-14 text-danger">*</i>&nbsp;:</label>
                                                <input type="text" class="form-control" name="sortNo" autocomplete="off"
                                                       placeholder="请输入排序号" data-tip="tooltip" data-placement="auto"
                                                       data-original-title="必填选项，可使100以内正整数数。"
                                                       data-parsley-length="[1, 3]"/>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">所在层级&nbsp;:</label>
                                                <input name="levelHide" disabled type="text" class="form-control"/>
                                                <input name="level" type="hidden"/>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">父级栏目&nbsp;:</label>
                                                <input name="pname" disabled type="text" class="form-control"/>
                                                <input name="pid" type="hidden"/>
                                            </div>
                                        </form>
                                        <!-- 结束编辑菜单设置模块-->
                                    </div>

                                    <div class="modal-footer">
                                        <a href="javascript:;" class="btn btn-white" data-dismiss="modal">取消编辑</a>
                                        <a href="javascript:;" class="btn btn-primary" data-loading-text="Loading..."
                                           nc-ajax-submit-target="editForm" nc-ajax-submit>确认提交</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 结束编辑栏目模态窗口 -->

                        <!-- 开始新增下级栏目模态窗口 -->
                        <div class="modal fade" id="addChildModal" tabindex="-1" role="dialog">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                                        </button>
                                        <h4 class="modal-title">新增菜单</h4>
                                    </div>
                                    <div class="modal-body">
                                        <!-- 开始新增下级菜单设置模块 -->
                                        <form id="addChildForm" action="${adminRoot}site/json/add" method="post"
                                              autocomplete="off" data-parsley-validate="true">
                                            <div class="form-group">
                                                <label class="control-label">栏目名称<i class="f-s-14 text-danger">*</i>&nbsp;:</label>
                                                <input type="text" class="form-control" name="name" autocomplete="off"
                                                       placeholder="请输入栏目名称" data-tip="tooltip" data-placement="auto"
                                                       data-original-title="必填选项，可使用中英文、内容长度控制在2-30个字符。"
                                                       data-parsley-required="true"
                                                       data-parsley-length="[2, 30]"/>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">栏目标识<i class="f-s-14 text-danger">*</i>&nbsp;:</label>
                                                <input type="text" class="form-control" name="nid" autocomplete="off"
                                                       placeholder="请输入栏目标识" data-tip="tooltip" data-placement="auto"
                                                       data-original-title="必填选项，可使用中英文、内容长度控制在2-10个字符。"
                                                       data-parsley-required="true"
                                                       data-parsley-length="[2, 10]"/>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-2 col-sm-3">栏目图片<i class="f-s-14 text-danger">*</i>&nbsp;:</label>
                                                <!--  <div class="col-md-9 col-sm-8">-->
                                                <input type="hidden" id="addFormPicPath1" name="sitpic" data-parsley-required="true">
                                                <div class="clickreply-image m-b-15"><img src="${imgRoot}default_image.gif" id="addFormPicImg1" alt="" class="media-object viewImage"></div>
                                                <p class="text-info">封面图片尺寸要求宽度为360像素、高度为200像素；支持格式gif，jpg，png。</p>
                                                <span class="btn btn-sm btn-white fileinput-button"> <i class="fa fa-upload"></i> <span>文件上传</span>
                                                    <input id="addFormPic1" type="file" name="file" autocomplete="off" multiple>
                                                     </span>
                                                <!--</div>-->
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">排序<i class="f-s-14 text-danger">*</i>&nbsp;:</label>
                                                <input type="number" class="form-control" name="sortNo"
                                                       autocomplete="off" placeholder="请输入排序号" value="0"
                                                       data-tip="tooltip" data-placement="auto"
                                                       data-original-title="必填选项，可使100以内正整数数。"
                                                       data-parsley-length="[1, 3]"/>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">所在层级&nbsp;:</label>
                                                <input name="levelHide" disabled type="text" class="form-control"/>
                                                <input name="level" type="hidden"/>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">父级栏目&nbsp;:</label>
                                                <input name="parentName" disabled type="text" class="form-control"/>
                                                <input name="pid" type="hidden"/>
                                            </div>
                                        </form>
                                        <!-- 结束新增下级菜单设置模块-->
                                    </div>
                                    <div class="modal-footer">
                                        <a href="javascript:;" class="btn btn-white" data-dismiss="modal">取消编辑</a>
                                        <a id="addChildBtn" href="javascript:;" class="btn btn-primary"
                                           data-loading-text="Loading..." nc-ajax-submit-target="addChildForm"
                                           nc-ajax-submit>确认提交</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 结束新增下级栏目模态窗口 -->

                    </div>
                </div>
            </div>
        </div>
        <!-- 结束布局行 -->
    </div>
    <!-- 结束页面内容 -->

    <!-- ================== 开始页面级JavaScrip调用 ================== -->
    <script src="${jsRoot}propaganda/site.handle.js"></script>
</@c.html>
